Hello there fellow mozDudes (and yes, I’m going to trademark that term). I’ve popped up from the ether to talk about conversion rate optimisation, and the design process. Now bear with me, because this is going to be a fairly long post. That said, if you read it thoroughly and pay attention, I’m pretty much certain that you’ll walk away with some food for thought (and if you apply it, more money in your business).
For all you lazy people who don’t want to read more than 1,500 words:
TL;DR – it’s easier to make more money by increasing conversion rate than getting more traffic. Test everything. Do evolutionary design and learn from the incremental steps, then do revolutionary design based on what you know.
And now for the non-lazy people:
Tick Followed Tock Followed Tick Followed Tock Followed Tick…
There are, loosely speaking, two types of redesign: evolutionary and revolutionary, which at Searchlight Digital (shameless plug) we refer to as Tick and Tock respectively. In the tick cycle, you work with what you have. This is the stage for testing small elements of a larger project, such as navbars, anchor text (for getting clicks, not for SEO benefit), architecture, visual elements (such as images, videos, WYSIWYG interfaces…) and so on.
Regardless of whether you’re doing tick or tock stage optimisation, the first stage should always be to decide what your business goals are. Are you trying to sell more products? Increase the volume of visits to a page? Increase the number of page views? Decrease the number of unqualified leads? Get a better profile of your target audience? Only by having this absolutely nailed can you really make conversion rate optimisation work. Otherwise, you could be fixing one problem whilst causing another. Always know what your site’s purpose is, and then gear everything you do around making it do that better.
Ticking Off The List…
In doing tick level optimisation, the key thing is granularity. You want to construct a periodic table of elements for the pages in your site. What does every single part currently look like, what does it do, and how does it do it. So, here’s a list of things to put on that list that could be applied to just about every site on the web:
- Navigation background, borders and text
- Sub-navigation background, borders and text
- Logo colour and shape
- Header images
- Header position, width, padding and margins
- Search box background, border and text
- Search box button background, border and text
- Search results order, layout and methods of relevance sorting
- Title typography, colour, weight and style (bold, italic and underline)
- Subhead typography, colour, weight and style (bold, italic and underline)
- Copy typography, colour, weight and style (bold, italic and underline)
- Copy layout, width, padding, line-height
- Calls to action and psychological/emotional hooks in main copy
- Tone of voice in main copy
- Ordered list item typography, colour, weight and style (bold, italic and underline)
- Unordered list item typography, colour, weight and style (bold, italic and underline)
- Link typography, colour, weight and style (bold, italic and underline)
- Link anchor text
- Sidebar(s) background, borders and text
- Sidebar(s) position, width, padding and margins
- Footer background, border and text
- Footer position, width, padding and margins
- Testimonials or client pages: where are they featured, what does the copy say, how many people visit them, could you have video of your clients espousing your services etc…
- Does your site have a tagline or “message”? If so, how many of your users get it? Does anyone notice? Test different versions
- What searches do people do inside your site? What categories/drill downs are they looking for that your nav doesn’t have that can be tested
On other sites, you could have video, in which case you could test
- Video position
- Calls to action to get people to click the video
- Different video buttons
- Different automatic levels for the audio track
- Different introduction or title sequences
- Music and images, different versions of videos…
If you’ve got an image gallery, you could test every element of that. Basically, there’s nothing whatsoever about your site that you can’t, and shouldn’t test at some point.
The point of all this tick testing is that it gives you the information you need about your users, whilst increasing conversion rate by small amounts. By the end of your tick list, you should know what colour schemes your users favour, how much text they read on a page, what types of phrases and calls to action and emotional hooks work best on them, what contexts and environments are likely to influence when and how they interact with your site…
You Gotta Tock To Meee…
After a tick period, comes the turn of the tock period. In this iteration, rather than making small changes, you redesign the whole thing. This can be seen in the Conversion Rate Experts SEOmoz sales page redesign which is documented extensively here. As a small aside, anyone interested in learning about conversion rates should seriously check out their blog, and go to their talks at SES, SMX and anywhere else they’re at. They really, seriously know their stuff, and both Karl and Ben are really cool guys.
Anyway, back on track… When it comes to doing tock stage development, there’s a fairly simple process to go through:
- Define the objective. I know we covered this earlier, but it bears repeating. You’ve got to get this nailed down. When you’ve decided, write it on a whacking great piece of A2 paper, and then stick it up on a wall so that everyone working on the new design knows exactly what they’re aiming for.
- Do your research. Now it’s time to take everything you learned from your tick testing about user behaviour, and combine it with some external research. Ask your customers why they converted, what do they love about the product/follow up etc…, what problems did they have, either practical or psychological during the process, what have they found/felt since then…
- Talk to people who haven’t bought. If you’ve got access to a mailing list, or a way of surveying people in some way, then ask them why they haven’t converted. What put them off? What got in their way? Is it that it doesn’t serve a need that they have, and if so, what is that need?
- Talk to the team that gets conversions on a day to day basis. What do they find most useful? What tactics help them drive conversions? What are the concerns people most often have? What’s the follow-on process for people after they’ve converted? Are they involved in that, and if so, what happens, and if not, why?
When you’ve got all this, then it’s time to start developing the new version of your site. Personally, I like to create multiple new versions, based on the data. Each version should be radically different to the current one, and to all the others.
For the design process, firstly start out with simple layouts. Don’t worry about typography or colour schemes yet. Just block out where things are going to go, where your main messaging is going to be, where the calls to action are going to go, where different page elements will be (videos, images, sidebars, navigation elements, links etc…).
When you’ve done that, create different versions of your copy. You should have a good understanding of what your audience responds to by now, so use that to draw up the new copy. If you’re not good at writing copy, get a copywriter to do it for you. A good copywriter is frankly worth their weight in gold.
Finally, when all the decisions have been made about the font choices, colours, messaging, all the copy has been written, all the images shot, all the video edited, it’s time to put it all together. At this juncture, I personally use one of my own tools to do a multivariate test on a small number of the possible combinations, so that I can quickly weed out elements that definitely don’t work. Then, when I’ve gotten it down to three or four good versions, it’s time to split test them against each other, and the original, in their entirety. There’s lots of software out there you can use to do this. Again, I use my own, but I’ve also used and gotten good results with Google Website Optimizer and Omniture Test and Target.
Examples
For my first example, we’ll look at Oak Furniture Land. We have so far worked on two seperate tick elements: the side navigation and ppc landing page layouts. Originally, the side navigation expanding lists were all open. We split tested having them all open, all closed, or certain ones open, to see what users did and how it affected the conversion rate. My personal theory was that having them all closed would increase conversion rates by around 7-10%, given how users react to choices given to them.
We ran a multivariate split test, using various different combinations, and sure enough all closed won out (by just over 8%).
In the case of the PPC landing pages, we created new versions of various different pages (for example: old / new # old / new). The new style has thus far managed to increase conversions from PPC by around 20%, whilst maintaining bounce rates and reducing the number of clicks required by users to get to the sections they seem to end up purchasing from.
As a second example, I’d recommend the SEOmoz case study over at Conversion Rate Experts.
Recommended Reading…
For some background research, I’d recommend the following:
If you’ve any questions or comments, leave me a note below and I’ll try and help.
